<script setup>
import { onBeforeUnmount, ref, shallowRef, onMounted, defineEmits } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

// 编辑器实例，必须用 shallowRef，重要！
const editorRef = shallowRef()

// 内容 HTML
const valueHtml = ref()

// 模拟 ajax 异步获取内容
onMounted(() =>
{
    // setTimeout(() =>
    // {
    //     valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
    // }, 1500)
})

// 编辑器配置
const editorConfig = {
    placeholder: '请输入内容...',
    MENU_CONF: { /* 菜单配置，下文解释 */ }
}

const handleCreated = (editor) =>
{
    editorRef.value = editor // 记录 editor 实例，重要！
}

// 组件销毁时，及时销毁编辑器
onBeforeUnmount(() =>
{
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})
const emit = defineEmits(['EditContent'])
// 传递内容
const getEditContent = () =>
{
    console.log(valueHtml.value, "<=====");
    emit('EditContent', valueHtml.value)
}
</script>

<template>
    <div style="border: 1px solid #ccc" class=" h-96 flex flex-col">
        <!-- 工具栏 -->
        <Toolbar :editor="editorRef" :defaultConfig="toolbarConfig" style="border-bottom: 1px solid #ccc" />
        <!-- 编辑器 -->
        <Editor v-model="valueHtml" :defaultConfig="editorConfig" style="overflow-y: hidden;" @onCreated="handleCreated"
            class=" h-96 " @onChange="getEditContent" />
    </div>
</template>

<!-- 别忘了引入样式 -->
<style src="@wangeditor/editor/dist/css/style.css"></style>